import { defineComponent, onUnmounted, ref, onMounted, watch, watchEffect } from 'vue';

/* scss */
import '@src/modules/trigger/components/rangeScale/index.scss';

export default defineComponent({
  name: 'RangeScale',
  emits: ['scaleChange'],
  setup(props, { emit }) {
    const isDragging = ref(false);
    const sliderRef = ref<HTMLDivElement | null>(null);
    const sliderThumbRef = ref<HTMLDivElement | null>(null);
    let percentage = ref(50);

    function emitScaleChange() {
      emit('scaleChange', percentage.value);
    }
    const changeBgWidthCssVar = () => {
        if (!sliderRef.value) return
        sliderRef.value.style.setProperty('--bg-width', percentage.value + '%');

    }
    const changeThumbLeft = () => {
        if (!sliderThumbRef.value) return
        sliderThumbRef.value.style.left = percentage.value + '%';
    }
    /**
     * @description 改变进度条
     */
    const changeProgress = () => {
        changeBgWidthCssVar()
        changeThumbLeft()
    }
    const startDrag = (event: MouseEvent) => {
      event.preventDefault();
      isDragging.value = true;
      document.addEventListener('mousemove', handleDrag);
      document.addEventListener('mouseup', stopDrag);
    };

    function handleDrag(event: MouseEvent) {
      if (isDragging.value && sliderRef.value) {
        const rectSlider = sliderRef.value.getBoundingClientRect();
        let position = event.clientX - rectSlider.left;
        percentage.value = (position / sliderRef.value.clientWidth) * 100;

        if (percentage.value < 0) {
          percentage.value = 0;
        } else if (percentage.value > 100) {
          percentage.value = 100;
        }

        changeThumbLeft()
        changeBgWidthCssVar();
      }
    }

    const choreGpsHandler = () => {
      percentage.value = 50;
    };

    const addScale = () => {
      percentage.value = percentage.value + 10;
    };

    const deleteScale = () => {
      percentage.value = percentage.value - 10;
    };

    const watchStop = watch(
      () => percentage.value,
      newValue => {
        if (newValue < 0) {
          percentage.value = 0;
        } else if (newValue > 100) {
          percentage.value = 100;
        }
        changeProgress()
        emitScaleChange();
      }
    );

    function stopDrag() {
      isDragging.value = false;
      document.removeEventListener('mousemove', handleDrag);
      document.removeEventListener('mouseup', stopDrag);
    }
    onMounted(() => {
      changeProgress()
    });
    onUnmounted(() => {
      stopDrag();
      watchStop();
    });

    return () => (
      <div class="range-scale">
        <div class="range-content">
          <div class="iconfont icon-zxh range-btn cur-base" onClick={() => deleteScale()}></div>
          <div class="slider" id="slider" ref={sliderRef}>
            <div class="slider-thumb" id="sliderThumb" ref={sliderThumbRef} onMousedown={(e: MouseEvent) => startDrag(e)}></div>
          </div>
          <div class="range-btn iconfont icon-add2 cur-base" onClick={() => addScale()}></div>
        </div>
        <div class="chore-gps cur-base" onClick={() => choreGpsHandler()} title="还原">
          <div class="iconfont icon-dingwei2"></div>
        </div>
      </div>
    );
  },
});
